<template>
  <div id="Navigation">
    <h2 v-if="isLogo">岁月流年</h2>
    <div class="nav-box">
      <ul class="nav">
        <li @click="toOther('index')">
          首页
          <div class="hole" v-if="id === 1"></div>
        </li>
        <li @click="toOther('project')">
          项目
          <div class="hole" v-if="id === 2"></div>
        </li>
        <li @click="toOther('blogArticle')">
          博客
          <div class="hole" v-if="id === 3"></div>
        </li>
        <li @click="toOther('resume')">
          简历
          <div class="hole" v-if="id === 4"></div>
        </li>
      </ul>
    </div>
    <loading ref="loading"/>
  </div>
</template>

<script>
const loading = () => import('../loading/index.vue')
export default {
  components:{loading},
  props:{
    id:{
      type: Number,
      default:-1
    }
  },
  data() {
    return {
      isLogo: false
    }
  },
  created() {
    if (this.$route.path === '/index') {
      this.isLogo = false
    } else {
      this.isLogo = true;
    }
  },
  methods: {
    toOther(val) {
      // this.$refs.loading.show()
      // setTimeout(() => {
      //   this.$refs.loading.close()
        this.$router.push(`/${val}`);
      // },1000)
    },
  },
};
</script>

<style lang="less" scoped>
#Navigation {
  position: absolute;
  width: 100%;
  top: 70px;
  display: flex;
  justify-content: space-between;
  .nav-box {
    position: relative;
    flex: 1;
  }
  .nav {
    background: #18191b;
    color: #fff;
    display: flex;
    height: 70px;
    width: 350px;
    position: absolute;
    right: -80px;
    z-index: 99;
    li {
      flex: 1;
      height: 100%;
      writing-mode: vertical-lr;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      .hole {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 15%;
        left: 60%;
      }
      .hole:after {
        position: absolute;
        height: 8px;
        width: 8px;
        content: "";
        border-radius: 50%;
        border: 4px solid #e94328;
      }
    }
  }
}
</style>